<template>
    <el-container style="height:100%">
        <el-aside>
            <el-menu background-color="#545c64" text-color="#fff" style="min-height: 100%;text-align:left;" @select="selectMenu" :default-active="activeRouteIndex()">
                <mall-menu :list="menus"></mall-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
              <div class="header">
                    <h1 class="system-name">
                      <img src=""/>
                      后台管理系统
                    </h1>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
              </div>
            </el-header>
            <el-main>
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
                <el-divider></el-divider>
                <router-view/>
            </el-main>
            <el-footer>
                footer
            </el-footer>
        </el-container>
    </el-container>
</template>
<script>
import { mapState } from 'vuex'
import api from '@/config/server.js'
import MallMenu from '@/components/MallMenu'
export default {
  components: {
    MallMenu
  },
  data () {
    return {
      tabs: [
      ]
    }
  },
  computed: {
    ...mapState({
      'menus': state => state.loginInfo.menus,
      'userInfo': state => state.loginInfo.userInfo,
      'currentRoute': state => state.routeInfo.currentRoute
    })
  },
  created () {
    api.current_user().then((data) => {
      if (data.ret === 1) {
        this.$store.commit('setUserInfo', data.result)
        console.log(data)
      }
    })
    api.menu_list().then((res) => {
      console.log('this.menus')
      console.log(res)
      this.$store.commit('setMenus', res.result)
      console.log(this.menus)
    })
  },
  methods: {
    selectMenu (key, keyPath) {
      console.log(key, keyPath)
    },
    logout () {
      this.$router.push('/')
    },
    activeRouteIndex (menus) {
      if (menus == null) {
        return this.activeRouteIndex(this.menus)
      } else {
        for (let i = 0; i < menus.length; i++) {
          let tmp = menus[i]
          if (tmp.routeUrl === this.currentRoute.path) {
            return tmp.id + ''
          }
          if (tmp.child) {
            let childres = this.activeRouteIndex(tmp.child)
            if (childres !== '-1') {
              return childres + ''
            }
          }
        }
      }
      return '-1'
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-header, .el-footer {
    background-color: white;
    color: #333;
    text-align: center;
  }
  .header{
    display: flex;
    justify-content:space-between;
    align-items:center;
  }
</style>
